<template>
  <div>
    <div style="margin: 10px 0">
      <el-carousel :interval="5000" height="500px">
        <el-carousel-item v-for="item in slideshow" :key="item.id" >
          <img :src="item.coverUrl"  @click="$router.push('/front/articleDetail?id=' + item.id)" alt="" width="100%">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="margin: 10px 0">
<!--      <el-rol :gutter="10">-->
        <el-col :span="8" v-for="item in tableData" :key="item.id" style="   "><!-- background-color: #f33; -->
<!--          <div style="padding: 20px 0; border-bottom: 1px dashed #ccc; display: flex" v-for="item in tableData" :key="item.id" >-->
          <div style="margin: 10px 5px;display: flex; height: 100px; border: 1px solid #ccc; border-radius: 8px"><!--  background-color: #f8f7f0;-->
            <div style="margin: 15px 5px">
              <img :src="item.coverUrl" alt="" style="width: 110px; height: 65px; margin-right: 10px; border-radius: 6px"/>
            </div>
            <div style="margin-top: 10px">
              <div style="padding: 5px; font-size: 16px; cursor: pointer" @click="$router.push('/front/articleDetail?id=' + item.id)">{{item.name}}</div>
              <div style="padding: 5px; font-size: 12px; margin-top: 10px">
                <div style="display: inline-block; width: 80px"><i class="el-icon-user-solid"></i><span>{{item.user}}</span></div>
                <i class="el-icon-time" style="margin-left: 5px;"></i><span>{{ new Date(item.createTime).toLocaleDateString() }}</span>
              </div>
            </div>
          </div>
<!--          </div>-->
        </el-col>
<!--      </el-rol>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontHome",
  data() {
    return {
      slideshow:[],
      tableData: [],
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.request.get("/article/Slideshow").then(res => {
        this.slideshow = res.data
      })

      this.request.get("/article/page?pageSize=5&pageNum=1").then(res => {
        this.tableData = res.data.records
      })
    },
    loadCarousel() {
      // this.request.get("/article/")
    }
  }
}
</script>

<style scoped>

</style>